<!--
 * @Descripttion: 设备台账记录
 * @version: 
 * @Author: ye_zhiguo
 * @Date: 2021-08-08 09:47:40
 * @LastEditTime: 2021-08-21 16:19:29
-->
<template>
  <div id="DeviceList">
    <!-- <van-nav-bar  title="设备台账" left-arrow @click-left="back"/> -->
    <Theader title="设备台账" :headerStyle="{color:'#333',backGroundColor: '#fff'}" :textStyle="{color:'#333'}"
      :titleStyle="{color:'#333'}">
      <template slot="header_arrow">
        <van-icon size="17" name="arrow-left" @click="back" />
      </template>
    </Theader>
    <van-tabs v-model="activeName">
      <van-tab title="缺陷记录" name="a"></van-tab>
      <van-tab title="隐患记录" name="b"></van-tab>
      <van-tab title="检修记录" name="c"></van-tab>
      <van-tab title="试验记录" name="d"></van-tab>
    </van-tabs>
    <div v-show="activeName=='a'||activeName=='b'||activeName=='c'">
      <van-search v-model="value" show-action :placeholder="activeName | placeholderFilter">
        <template #action>
          <div>
            <img src="../../images/icon_pm_screen.png" @click="showScreen" style="height:1rem;width:1rem;">
          </div>
        </template>
      </van-search>
    </div>
    <!-- 缺陷记录 -->
    <div v-show="activeName=='a'" class="out-main">
      <div v-for="(item,index) in defectList" :key="index" class="in-main">
        <div class="flex-box">
          <van-button :color="item.statue | colorFilter" size="small">{{item.statue}}</van-button>
          <div>
            <span class="staticText">缺陷性质：</span>
            <span class="special-color" :style="item.nature | natureFilter">「{{item.nature}}」</span>
          </div>
        </div>
        <div class="padding-top">
          <span class="dynamicText">{{item.text}}</span>
        </div>
        <div class="padding-top">
          <span class="staticText">发现时间：</span>
          <span class="staticText">{{item.startTime | timeFilter}}</span>
        </div>
        <div class="padding-top">
          <span class="staticText">消缺时间：</span>
          <span class="staticText">{{item.overTime | timeFilter}}</span>
        </div>
      </div>
    </div>

    <!-- 隐患记录 -->
    <div v-show="activeName=='b'" class="out-main">
      <div v-for="(item,index) in hiddenList" :key="index" class="in-main">
        <div>
          <van-button :color="item.statue | colorFilter" size="small">{{item.statue}}</van-button>
        </div>
        <div class="padding-top">
          <span class="dynamicText">{{item.text}}</span>
        </div>
        <div class="padding-top">
          <span class="staticText">发现时间：</span>
          <span class="staticText">{{item.startTime | timeFilter}}</span>
        </div>
      </div>
    </div>


    <!-- 检修记录 -->
    <div v-show="activeName=='c'" class="out-main">
      <div class="in-main" style="font-size:0.8125rem;">
        <div class="padding-top" style="display: flex;">
          <span class="text666">工作内容：</span>
          <span class="dynamicText">东善桥变#1主变、#2主变、#3主变本体取筒化、色谱油样。</span>
        </div>
        <div class="padding-top">
          <span class="text666">检修内容：</span>
          <span class="dynamicText">D类检修</span>
        </div>
        <div class="padding-top">
          <span class="text666">工作时间：</span>
          <span class="dynamicText">2021/04/04 14:30:00</span>
        </div>
      </div>
    </div>

    <!-- 试验记录 -->
    <div v-show="activeName=='d'" class="out-main">
      <div class="in-main">
        <div class="container-text">
          <van-cell-group v-for="(item,i) in testList" :key="i">
            <van-cell :title="item.text1" :value="item.text2" />
          </van-cell-group>
        </div>
      </div>
    </div>

    <van-popup v-model="screenShow" position="right" closeable close-icon-position="top-right"
      style="width: 80% ;height: 100% ;">
      <div class="popup-main">
        <div class="popup-title">筛选</div>
        <div class="margin-top">状态</div>
        <div class="statue">
          <van-row type="flex" justify="center">
            <van-col span="8">
              <div :class="allScreen.checked?'checked-box':'nochecked'" @click="checkdAll()">
                <span>{{allScreen.text}}</span>
              </div>
            </van-col>
            <van-col span="8" v-for="(item,i) in defectScreen" :key="i">
              <div :class="item.checked?'checked-box':'nochecked'" @click="checkdScreen(i)">
                <span>{{item.text}}</span>
              </div>
            </van-col>
          </van-row>
        </div>
        <div class="margin-top">时间</div>
        <div class="time-box">
          <van-row type="flex" justify="space-around">
            <van-col span="10">
              <div @click="getStartTimeOrEndTime('startTime')">{{startTime}}
              </div>
            </van-col>
            <van-col span="2">
              <div style="background: #F5F6F7;">至</div>
            </van-col>
            <van-col span="10">
              <div @click="getStartTimeOrEndTime('endTime')">{{endTime}}
              </div>
            </van-col>
          </van-row>
        </div>
      </div>
      <div class="popup-footer">
        <van-row type="flex" justify="space-around">
          <van-col span="10">
            <div @click="reset()" class="reset-btn">重置
            </div>
          </van-col>
          <van-col span="10">
            <div @click="confirm()" class="confirm-btn">确定
            </div>
          </van-col>
        </van-row>
      </div>
    </van-popup>
    <van-popup v-model="timeShow" position="bottom" style="height: 80% ;">
      <van-datetime-picker v-model="checkTime" type="datetime" title="选择时间" />
    </van-popup>
  </div>
</template>

<script>
  import Theader from "../component/header"
  export default {
    components: {
      Theader
    },
    data() {
      return {
        activeName: 'a',
        titleList: [{
          title: '缺陷记录',
        },
        {
          title: '隐患记录',
        },
        {
          title: '检修记录',
        },
        {
          title: '试验记录',
        }],
        defectList: [{
          statue: '缺陷登记',
          nature: '一般',
          text: '1号主变220Kv开关A、B、C相液压机构油位低，A、C相接口处有渗油现象。',
          startTime: '2021/06/13 11:30:00',
          overTime: '2021/05/20 15:00:00'
        }, {
          statue: '已结束',
          nature: '严重',
          text: '1号主变220Kv开关A、B、C相液压机构油位低，A、C相接口处有渗油现象。',
          startTime: '2021/06/13 11:30:00',
          overTime: '2021/05/20 15:00:00'
        }, {
          statue: '结束',
          nature: '危急',
          text: '1号主变220Kv开关A、B、C相液压机构油位低，A、C相接口处有渗油现象。',
          startTime: '2021/06/13 11:30:00',
          overTime: '2021/05/20 15:00:00'
        }],
        hiddenList: [{
          statue: '缺陷登记',
          text: '西边围墙处有一处竹林和火烧山后干枯树枝，存在超高树木的隐患',
          startTime: '2021/06/13 11:30:00',
        }, {
          statue: '已结束',
          text: '投运超7年主变有载分接开关未开展吊芯检查',
          startTime: '2021/06/13 11:30:00',
        }, {
          statue: '结束',
          text: '大电流高压开关柜超6年未检（母线应停电）',
          startTime: '2021/06/13 11:30:00',
        }],
        testList: [{
          text1: '试验专业：',
          text2: '例检'
        }, {
          text1: '试验性质：',
          text2: '电气'
        }, {
          text1: '试验日期：',
          text2: '2021/04/04 13:30:00'
        }, {
          text1: '设备类型：',
          text2: '主变压器'
        }, {
          text1: '电站/线路：',
          text2: '东善桥变'
        }, {
          text1: '录入人：',
          text2: '张卫民'
        }, {
          text1: '试验结论：',
          text2: '合格'
        }, {
          text1: '附件：',
          text2: ''
        }],
        value: '',   //搜索内容
        placeText: '请输入缺陷记录', //搜索框的静态文本
        defectShow: true,  //缺陷记录
        defectScreen: [{
          text: '缺陷登记',
          checked: false
        }, {
          text: '班组审核',
          checked: false
        }, {
          text: '检修专责审核',
          checked: false
        }, {
          text: '消缺安排',
          checked: false
        }, {
          text: '缺陷入池',
          checked: false
        }, {
          text: '消缺处理',
          checked: false
        }, {
          text: '消缺验收',
          checked: false
        }, {
          text: '结束',
          checked: false
        }],  //缺陷筛选
        allScreen: {
          text: '全部',
          checked: true
        }, //全部筛选
        hiddenShow: false, //隐患记录
        overhaulShow: false, //检修记录
        testShow: false, //检修记录
        searchShow: true, //搜索框
        endTime: '2021/08/01',
        startTime: '2021/07/01',
        checkTime: '2021/07/01',
        list: [], //下拉加载
        loading: false,
        finished: false,
        screenShow: false, //筛选弹窗
        screenResult: [], //筛选结果
        timeShow: false, //选择时间弹窗
      }
    },
    filters: {
      colorFilter(c) {
        if (c === '已结束') {
          return '#CCCCCC'
        } else return '#0EB295'
      },
      natureFilter(n) {
        if (n == '一般') {
          return 'color: #0EB295;'
        }
        if (n == '严重') {
          return 'color: #F9942D;'
        }
        if (n == '危急') {
          return 'color: #FA5151;'
        }
      },
      timeFilter(t) {
        return t
      },
      placeholderFilter(a) {
        if (a == 'a') return '请输入缺陷记录'
        if (a == 'b') return '请输入隐患记录'
        if (a == 'c') return '请输入检修记录'
      }
    },
    methods: {
      /**
       * @description: 返回
       */
      back() {
        this.$router.go(-1)
      },
      /**
       * @description: 筛选弹窗
       */
      showScreen() {
        this.screenShow = true
      },
      /**
       * @description: 选择筛选
       */
      checkdScreen(i) {
        if (this.allScreen.checked == false) {
          this.defectScreen[i].checked = !this.defectScreen[i].checked
        }
      },
      /**
       * @description: 选择全部筛选
       */
      checkdAll() {
        var _self = this
        var objBake = _self.defectScreen
        _self.allScreen.checked = !_self.allScreen.checked
        console.log(_self.allScreen)
        if (_self.allScreen.checked == true) {
          for (let i = 0; i < objBake.length; i++)
            _self.defectScreen[i].checked = false
        }
      },
      /**
       * @description: 重置筛选
       */
      reset() {
      },
      /**
       * @description: 确定筛选
       */
      confirm() {
      },
      /**
       * @description: 选择时间
       */
      getStartTimeOrEndTime(t) {
        console.log(t)
        this.timeShow = true
      },
    }

  }
</script>

<style>
  #DeviceList {
    width: 100%;
    height: 100%;
    font-size: 0.9375rem;
  }

  #DeviceList .van-tab--active {
    color: #0EB295;
  }

  #DeviceList .van-tabs__line {
    background-color: #0EB295;
  }

  #DeviceList .van-nav-bar__text {
    color: #333333;
  }

  #DeviceList .van-search {
    background-color: #F5F6F7;
  }

  #DeviceList .van-search__content {
    background-color: #fff;
  }

  #DeviceList .van-button {
    border-radius: 4px;
    font-size: 0.8125rem;
    width: 74px;
    height: 23px;
  }

  #DeviceList .out-main {
    height: calc(100vh - 10rem);
    padding: 0.5rem 10px;
    background-color: #F5F6F7;
    overflow: auto;
  }

  #DeviceList .in-main {
    padding: 10px;
    background-color: #fff;
    /* font-size: 0.8125rem; */
    border-radius: 5px;
    margin-bottom: 10px;
  }

  #DeviceList .special-color {
    color: #0EB295;
  }

  #DeviceList .flex-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  #DeviceList .padding-box {
    padding: 10px;
  }

  #DeviceList .padding-top {
    padding-top: 10px
  }

  #DeviceList .padding-bottom {
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
  }

  #DeviceList .staticText {
    color: #999999;
    font-size: 0.8125rem;
    /* min-width: 65px; */
  }

  #DeviceList .dynamicText {
    color: #333333;
    flex: 1;
  }

  #DeviceList .text666 {
    color: #666666;
    min-width: 65px;
  }

  #DeviceList .container-text {
    font-size: 0.8125rem;
    color: #999999;
  }

  #DeviceList .van-icon-cross::before {
    color: #333333;
  }

  #DeviceList .popup-title {
    height: 8%;
    font-size: 1.0625rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  #DeviceList .popup-main {
    background: #F5F6F7;
    padding: 10px;
    height: 90%;
  }

  #DeviceList .popup-main .time-box div {
    background: #fff;
    color: #999999;
    font-size: 0.8125rem;

  }

  #DeviceList .popup-main .van-col .nochecked {
    background: #fff;
    color: #999999;
    font-size: 0.8125rem;
    width: 90%;
    margin-left: 5%;
    line-height: 25px;
    border-radius: 4px;
  }

  #DeviceList .popup-main .statue .van-col {
    text-align: center;
    padding: 10px 0;
  }

  #DeviceList .popup-main .time-box .van-col {
    text-align: center;

  }

  #DeviceList .popup-main .margin-top {
    margin-top: 15px;
    font-size: 0.9375rem;
  }

  #DeviceList .time-box {
    margin-top: 10px;
  }

  #DeviceList .popup-footer {
    padding-top: calc(5% - 10px);
  }

  #DeviceList .popup-footer .reset-btn {
    border-radius: 4px;
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
    color: #666666;
    font-size: 15px;
    text-align: center;
  }

  #DeviceList .popup-footer .confirm-btn {
    border-radius: 4px;
    background: #0EB295;
    border: 1px solid #0EB295;
    color: #fff;
    font-size: 15px;
    color: #fff;
    text-align: center;
  }

  #DeviceList .popup-footer .van-row {
    align-items: center;
  }

  #DeviceList .checked-box {
    background: #0EB295;
    color: #fff;
    font-size: 0.8125rem;
    width: 90%;
    margin-left: 5%;
    line-height: 25px;
    border-radius: 4px;
  }

  #DeviceList .van-cell {
    color: #666666;
    font-size: 0.8125rem;
  }

  #DeviceList .van-cell__value {
    color: #333333;
    font-size: 0.8125rem;
  }

  #DeviceList [class*=van-hairline]::after {
    border: none
  }
</style>